<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>登录界面</title>  
<!-- <link rel="stylesheet" href="styles.css">   -->
 <style>
    body, html {  
    height: 100%;  
    margin: 0;  
    font-family: Arial, sans-serif;  
}  
  
.login-container {  
    position: relative;  
    height: 100%;  
}  
  
.slider {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    overflow: hidden;  
}  
  
.slider img {  
    width: 100%;  
    height: 100%;  
    object-fit: cover;  
    display: none; /* 初始时隐藏所有图片 */  
}  
  
.login-form {  
    position: absolute;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    background: rgba(255, 255, 255, 0.8);  
    padding: 20px;  
    border-radius: 10px;  
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  
}  
  
.form-group {  
    margin-bottom: 15px;  
}  
  
.form-group input {  
    width: 100%;  
    padding: 10px;  
    border: 1px solid #ccc;  
    border-radius: 5px;  
}  
  
.checkbox-group {  
    margin-bottom: 10px;  
}  
  
.error {  
    color: red;  
    font-size: 0.8em;  
}  
  
button {  
    width: 100%;  
    padding: 10px;  
    border: none;  
    background-color: #007bff;  
    color: white;  
    border-radius: 5px;  
    cursor: pointer;  
}  
  
button:hover {  
    background-color: #0056b3;  
}
 </style>
</head>  
<body>  
<div class="login-container">  
    <div class="slider" id="slider">  
        <!-- 假设有3张图片 -->  
        <img src="1.jpg" alt="Slide 1">  
        <img src="2.jpg" alt="Slide 2">  
        <img src="3.jpg" alt="Slide 3">  
    </div>  
    <div class="login-form">  
        <h1>账号登录</h1>  
        <div class="form-group">  
            <input type="text" placeholder="请输入手机号码" id="login_phone">  
            <label class="error" id="login_phone_text"></label>  
        </div>  
        <div class="form-group">  
            <input type="password" placeholder="请输入密码" id="login_password">  
            <label class="error" id="login_password_text"></label>  
        </div>  
        <div class="checkbox-group">  
            <input type="checkbox" id="login_checkbox">  
            点击按钮，即表示您已同意<a href="#">《用户服务协议》</a>和<a href="#">《隐私协议》</a>  
        </div>  
        <button id="login_submit">登录</button>  
    </div>  
</div>  
  
<!-- 可以引入轮播图的JavaScript库或代码，如Swiper, Slick Slider等 -->  
<script>
    document.addEventListener('DOMContentLoaded', function() {  
    const slides = document.querySelectorAll('.slide');  
    let currentIndex = 0;  
  
    function showSlide(index) {  
        slides.forEach((slide, idx) => {  
            slide.classList.remove('active');  
            if (idx === index) {  
                slide.classList.add('active');  
            }  
        });  
    }  
  
    function nextSlide() {  
        currentIndex = (currentIndex + 1) % slides.length;  
        showSlide(currentIndex);  
    }  
  
    // 设置轮播间隔  
    setInterval(nextSlide, 3000); // 每3秒切换一次  
  
    // 初始化显示第一张图片  
    showSlide(currentIndex);  
});
</script>  
</body>  
</html>